<template>
  <view class="login-container">
    <view class="login-card">
      <view class="logo-wrap">
        <image
          class="logo-img"
          src="http://localhost:8080/xiquwenhuaxiaochengxu/img/logo.jpg"
          mode="aspectFill"
        ></image>
      </view>

      <view class="form-item">
        <input
          v-model="username"
          class="input-style"
          type="text"
          placeholder="请输入账号"
        />
      </view>

      <view class="form-item">
        <input
          v-model="password"
          class="input-style"
          type="password"
          placeholder="请输入密码"
        />
      </view>

      <view class="role-picker" v-if="roleNum > 1">
        <picker @change="optionsChange" :value="index" :range="options">
          <view class="picker-text">{{ options[index] }}</view>
        </picker>
      </view>

      <button @tap="onLoginTap" class="login-btn">立即登录</button>

      <view class="action-links">
        <text class="link-text" @tap="onRegisterTap('yonghu')">注册账号</text>
        <text class="link-divider">|</text>
        <text class="link-text" @tap="onForgetTap">忘记密码</text>
      </view>
    </view>
  </view>
</template>

<script>
import menu from "@/utils/menu";

export default {
  data() {
    return {
      username: "",
      password: "",
      codes: [
        {
          num: 1,
          color: "#000",
          rotate: "10deg",
          size: "16px",
        },
        {
          num: 2,
          color: "#000",
          rotate: "10deg",
          size: "16px",
        },
        {
          num: 3,
          color: "#000",
          rotate: "10deg",
          size: "16px",
        },
        {
          num: 4,
          color: "#000",
          rotate: "10deg",
          size: "16px",
        },
      ],
      options: ["请选择登录用户类型"],
      optionsValues: ["", "yonghu"],
      index: 0,
      roleNum: 0,
    };
  },
  onLoad() {
    let options = ["请选择登录用户类型"];
    let menus = menu.list();
    this.menuList = menus;
    for (let i = 0; i < this.menuList.length; i++) {
      if (this.menuList[i].hasFrontLogin == "是") {
        options.push(this.menuList[i].roleName);
        this.roleNum++;
      }
    }
    if (this.roleNum == 1) {
      this.index = 1;
    }
    this.options = options;
    this.randomString(4);
    this.styleChange();
  },
  methods: {
    randomString(len = 4) {
      const chars = [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
      ];
      const colors = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
      ];
      const sizes = ["28", "30", "32", "34", "36"];

      for (let i = 0; i < len; i++) {
        // 随机验证码
        const key = Math.floor(Math.random() * chars.length);
        this.codes[i].num = chars[key];
        // 随机验证码颜色
        let code = "#";
        for (let j = 0; j < 6; j++) {
          const key = Math.floor(Math.random() * colors.length);
          code += colors[key];
        }
        this.codes[i].color = code;
        // 随机验证码方向
        let rotate = Math.floor(Math.random() * 30);
        const plus = Math.floor(Math.random() * 2);
        if (plus == 1) rotate = "-" + rotate;
        this.codes[i].rotate = "rotate(" + rotate + "deg)";
        // 随机验证码字体大小
        const size = Math.floor(Math.random() * sizes.length);
        this.codes[i].size = sizes[size] + "rpx";
      }
    },
    styleChange() {
      this.$nextTick(() => {
        // document.querySelectorAll('.uni-yaoxianStyle .uni-yaoxianStyle-yaoxianStyle').forEach(el=>{
        //   el.style.backgroundColor = this.loginFrom.content.yaoxianStyle.backgroundColor
        // })
      });
    },
    onRegisterTap(tableName) {
      uni.setStorageSync("loginTable", tableName);
      this.$utils.jump("../register/register");
    },
    onForgetTap() {
      this.$utils.jump("../forget/forget");
    },

    async onLoginTap() {
      if (!this.optionsValues[this.index]) {
        this.$utils.msg("请选择登陆人类型");
        return;
      }
      if (1 == 2 && this.inputCode != this.validateCode) {
        this.$utils.msg("请输入正确的验证码");
        return;
      }
      let res = await this.$api.login(`${this.optionsValues[this.index]}`, {
        username: this.username,
        password: this.password,
      });
      uni.setStorageSync("token", res.token);
      uni.setStorageSync("nickname", this.username);
      uni.setStorageSync("nowTable", `${this.optionsValues[this.index]}`);
      res = await this.$api.session(`${this.optionsValues[this.index]}`);
      uni.setStorageSync("userid", res.data.id);
      if (res.data.vip) {
        uni.setStorageSync("vip", res.data.vip);
      }
      uni.setStorageSync("role", `${this.options[this.index]}`);
      this.$utils.tab("../index/index");
    },

    optionsChange(e) {
      this.index = e.target.value;
    },
  },
};
</script>
<style>
/* 基础容器 */
.login-container {
  height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 登录卡片 */
.login-card {
  width: 85%;
  padding: 40rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 24rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
  margin: 0 auto;
}

/* Logo样式 */
.logo-wrap {
  text-align: center;
  margin: 40rpx 0 60rpx;
}
.logo-img {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

/* 输入框样式 */
.input-style {
  height: 96rpx;
  padding: 0 32rpx;
  margin: 24rpx 0;
  background: #f8f9fa;
  border-radius: 12rpx;
  font-size: 30rpx;
  color: #2d3436;
  transition: all 0.3s ease;
}
.input-style:focus {
  background: #ffffff;
  box-shadow: 0 4rpx 12rpx rgba(82, 136, 255, 0.2);
}

/* 登录按钮 */
.login-btn {
  height: 96rpx;
  line-height: 96rpx;
  background: linear-gradient(45deg, #5470ff, #82a0ff);
  color: #fff;
  font-size: 34rpx;
  border-radius: 12rpx;
  margin: 60rpx 0 40rpx;
  transition: transform 0.2s;
}
.login-btn:active {
  transform: scale(0.98);
}

/* 功能链接 */
.action-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40rpx;
}
.link-text {
  color: #666;
  font-size: 28rpx;
  padding: 0 20rpx;
  transition: color 0.3s;
}
.link-text:active {
  color: #5470ff;
}
.link-divider {
  color: #ddd;
  font-size: 24rpx;
}

/* 角色选择器 */
.role-picker {
  margin: 20rpx 0;
}
.picker-text {
  color: #5470ff;
  font-size: 28rpx;
  text-align: center;
  padding: 20rpx;
}
</style>
